<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>次页</title>
  <script type="text/javascript" src="../js/jquery-3.6.1.min.js"></script>
  <script src="https://cdn.ckeditor.com/ckeditor5/35.0.1/classic/ckeditor.js"></script>
  <style>
      body{
          margin: 0;
          padding: 0;
      }
      .clearDiv{
          clear: both;
      }
      table{
          margin: 2rem auto 0 auto;
          width: 60%;
          text-align: center;
          border-collapse: collapse;
      }
      table td,th{
          border: #605964 2px solid;
      }
  </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th style="width: 15rem;">全选<label><input type="checkbox" id="selectAll"></label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;禁选<label><input type="checkbox" id="banSelect"></label></th>
        <th>微信</th>
        <th>支付宝</th>
        <th>QQ</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>选择<label><input type="checkbox" name="selectOption" value="1"></label></td>
        <td>Abqwerty</td>
        <td>123456789</td>
        <td>9876543</td>
    </tr>
    <tr>
        <td>选择<label><input type="checkbox" name="selectOption" value="2"></label></td>
        <td>Abqwerty</td>
        <td>123456789</td>
        <td>9876543</td>
    </tr>
    <tr>
        <td>选择<label><input type="checkbox" name="selectOption" value="3"></label></td>
        <td>Abqwerty</td>
        <td>123456789</td>
        <td>9876543</td>
    </tr>
    <tr>
        <td>选择<label><input type="checkbox" name="selectOption" value="4"></label></td>
        <td>Abqwerty</td>
        <td>123456789</td>
        <td>9876543</td>
    </tr>
    <tr>
        <td>选择<label><input type="checkbox" name="selectOption" value="5"></label></td>
        <td>Abqwerty</td>
        <td>123456789</td>
        <td>9876543</td>
    </tr>
    <tr>
        <td>选择<label><input type="checkbox" name="selectOption" value="6"></label></td>
        <td>Abqwerty</td>
        <td>123456789</td>
        <td>9876543</td>
    </tr>
    <tr>
        <td>选择<label><input type="checkbox" name="selectOption" value="7"></label></td>
        <td>Abqwerty</td>
        <td>123456789</td>
        <td>9876543</td>
    </tr>
    <tr>
        <td>选择<label><input type="checkbox" name="selectOption" value="8"></label></td>
        <td>Abqwerty</td>
        <td>123456789</td>
        <td>9876543</td>
    </tr>
    <tr>
        <td>选择<label><input type="checkbox" name="selectOption" value="9"></label></td>
        <td>Abqwerty</td>
        <td>123456789</td>
        <td>9876543</td>
    </tr>
    <tr>
        <td>选择<label><input type="checkbox" name="selectOption" value="10"></label></td>
        <td>Abqwerty</td>
        <td>123456789</td>
        <td>9876543</td>
    </tr>
    <tr>
        <td>选择<label><input type="checkbox" name="selectOption" value="11"></label></td>
        <td>Abqwerty</td>
        <td>123456789</td>
        <td>9876543</td>
    </tr>
    <tr>
        <td>选择<label><input type="checkbox" name="selectOption" value="12"></label></td>
        <td>Abqwerty</td>
        <td>123456789</td>
        <td>9876543</td>
    </tr>
    <tr>
        <td>选择<label><input type="checkbox" name="selectOption" value="13"></label></td>
        <td>Abqwerty</td>
        <td>123456789</td>
        <td>9876543</td>
    </tr>
    <tr>
        <td>选择<label><input type="checkbox" name="selectOption" value="14"></label></td>
        <td>Abqwerty</td>
        <td>123456789</td>
        <td>9876543</td>
    </tr>
    <tr>
        <td>选择<label><input type="checkbox" name="selectOption" value="15"></label></td>
        <td>Abqwerty</td>
        <td>123456789</td>
        <td>9876543</td>
    </tr>
    <tr>
        <td>选择<label><input type="checkbox" name="selectOption" value="16"></label></td>
        <td>Abqwerty</td>
        <td>123456789</td>
        <td>9876543</td>
    </tr>
    </tbody>

    <tfoot>
    <tr><td colspan="4"><button id="btn">清空所有</button></td></tr>
    </tfoot>

</table>

<label>请输入密码：<input type="text" required></label>
<label>请输入密码：<input type="radio" name="sex" >Boy<input type="radio" name="sex" checked>Girl</label>
</body>
<script type="text/javascript">
    $("#selectAll").click(function (){
        $("tbody input[name='selectOption']").prop("checked",this.checked);
    });
    $("#banSelect").click(function (){
        $("tbody input[name='selectOption']").prop("disabled",this.checked);
        $("#selectAll").prop("disabled",this.checked);
    });
    $("thead").css("background-color","rgba(23,224,231,0.56)");
    $("tbody tr").odd().css("background-color","rgba(37,2,255,0.5)")
    // .even().css("background-color","rgba(190,96,241,0.42)");
    $("#btn").click(function (){
        $("tbody tr").even().empty();
    });
    // console.info(document.getElementsByName("selectOption").length);
    // console.info(document.getElementsByName("selectOption")[1].value);


</script>
</html>